<template>
  <div>
    <nav-bar title="搜索结果" />
    <!-- 文章列表 -->
    <main class="main">
      <van-loading
        class="loading"
        v-if="Loading"
        color="#1989fa"
      />
      <van-empty
        v-else-if="!SearchResult"
        image="error"
        description="请求错误"
      />
      <van-empty
        v-else-if="!SearchResult.length"
        description="暂无数据"
      />
      <article-list
        v-else
        :data="SearchResult"
      />
    </main>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
// import { Loading } from 'element-ui';

export default {
  name: 'SearchResult',
  data() {
    return {
      Loading: true
    };
  },
  computed: {
    ...mapState('search', [
      'SearchResult',
    ]),
  },
  methods: {
    ...mapActions('search', [
      'updateSearchResult',
    ]),
    ...mapMutations('search', [
      'SET_SEARCH_RESULT',
    ]),
  },
  async created() {
    await this.updateSearchResult(this.$route.query.q)
    this.Loading = false

    // // 路由实例
    // console.log(this.$router);
    // // 当前路由信息
    // console.log(this.$route.query.q);

    // this.updateSearchResult(this.$route.query.q);
  },
  beforeDestroy() {
    this.SET_SEARCH_RESULT([]);
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/styles/common.less');
main {
    padding: 0 8px;
    overflow: auto;
    height: calc(100vh - 94px);
     .loading {
    display: flex;
    justify-content: center;
    margin: 50px;
  }
  }
</style>
